<template>
<div class="mod-demo-echarts">
    <el-row :gutter="20">

        <el-col :span="6">
            <el-card>
                <div class="text-card">
                    <icon-svg name="reader1"></icon-svg>
                    <span>85</span>
                    <div>本月新增读者</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <div class="text-card">
                    <icon-svg name="book"></icon-svg>
                    <span>500</span>
                    <div>本月采购图书</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <div class="text-card">
                    <icon-svg name="book"></icon-svg>
                    <span>350</span>
                    <div>本月上架图书</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <div class="text-card">
                    <icon-svg name="book"></icon-svg>
                    <span>800</span>
                    <div>本月入库图书</div>
                </div>
            </el-card>
        </el-col>

        <el-col :span="12">
            <el-card>
                <div id="readerBox" class="chart-box"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <div id="borrowBox" class="chart-box"></div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
import echarts from "echarts";
export default {
    data() {
        return {
            readerBox: null,
            borrowBox: null,
        };
    },
    mounted() {
        this.initReaderBox();
        this.initBorrowBox();
    },
    activated() {
        // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
        if (this.readerBox) {
            this.readerBox.resize();
        }
        if (this.borrowBox) {
            this.borrowBox.resize();
        }
    },
    methods: {
        initReaderBox() {
            var option = {
                title: {
                    text: "最近一周新增读者",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: [""],
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                },
                yAxis: {
                    type: "value",
                },
                series: [{
                    name: "注册数",
                    type: "line",
                    stack: "总量",
                    data: [12, 13, 10, 23, 9, 23, 3],
                }, ],
            };
            this.readerBox = echarts.init(document.getElementById("readerBox"));
            this.readerBox.setOption(option);
            window.addEventListener("resize", () => {
                this.readerBox.resize();
            });
        },

        initBorrowBox() {
            var option = {
                title: {
                    text: "最近一周借阅量",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: [""],
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                },
                yAxis: {
                    type: "value",
                },
                series: [{
                    name: "借阅量",
                    type: "line",
                    stack: "总量",
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: "rgb(145, 199, 174)",
                            },
                        },
                    },
                    data: [120, 132, 101, 134, 90, 230, 210],
                }, ],
            };
            this.borrowBox = echarts.init(document.getElementById("borrowBox"));
            this.borrowBox.setOption(option);
            window.addEventListener("resize", () => {
                this.borrowBox.resize();
            });
        },
    },
};
</script>

<style lang="scss">
.mod-demo-echarts {
    >.el-alert {
        margin-bottom: 10px;
    }

    >.el-row {
        margin-top: -10px;
        margin-bottom: -10px;

        .el-col {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    .chart-box {
        min-height: 400px;
    }

    .text-card {
        margin-left: 80px;

        svg {
            width: 40px;
            height: 40px;
        }

        span {
            margin-left: 5px;
            font-size: 2em;
            color: orangered;
        }

        div {
            margin-top: 10px;
        }
    }

}
</style>
